#HTML <iframe>

The <iframe> HTML element represents a nested browsing context, embedding another HTML page into the current one.

#Attributes

• allow: Specifies a Permissions Policy for the <iframe>. The policy defines what features are available to the <iframe> (for example, access to the microphone, camera, battery, web-share, etc.) based on the origin of the request.

  See iframes in the Permissions-Policy topic for examples.

  Note: A Permissions Policy specified by the allow attribute implements a further restriction on top of the policy specified in the Permissions-Policy header. It doesn't replace it.

• allowfullscreen: Set to true if the <iframe> can activate fullscreen mode by calling the requestFullscreen() method.

  Note: This attribute is considered a legacy attribute and redefined as allow="fullscreen".

• allowpaymentrequest Deprecated

Non-standard : Set to true if a cross-origin <iframe> should be allowed to invoke the Payment Request API.

**Note:**
This attribute is considered a legacy attribute and redefined as `allow="payment"`.

• browsingtopics Experimental

Non-standard : A boolean attribute that, if present, specifies that the selected topics for the current user should be sent with the request for the <iframe>'s source. See Using the Topics API for more details.

• credentialless Experimental : Set to true to make the <iframe> credentialless, meaning that its content will be loaded in a new, ephemeral context. It doesn't have access to the network, cookies, and storage data associated with its origin. It uses a new context local to the top-level document lifetime. In return, the Cross-Origin-Embedder-Policy (COEP) embedding rules can be lifted, so documents with COEP set can embed third-party documents that do not. See IFrame credentialless for more details.

• csp Experimental : A Content Security Policy enforced for the embedded resource. See HTMLIFrameElement.csp for details.

• height: The height of the frame in CSS pixels. Default is 150.

• loading: Indicates when the browser should load the iframe:

  • eager: Load the iframe immediately on page load (this is the default value).

  • lazy: Defer loading of the iframe until it reaches a calculated distance from the visual viewport, as defined by the browser. The intent is to avoid using the network and storage bandwidth required to fetch the frame until the browser is reasonably certain that it will be needed. This improves the performance and cost in most typical use cases, in particular by reducing initial page load times.

    Note: Loading is only deferred when JavaScript is enabled. This is an anti-tracking measure.

• name: A targetable name for the embedded browsing context. This can be used in the target attribute of the <a>, <form>, or <base> elements; the formtarget attribute of the <input> or <button> elements; or the windowName parameter in the window.open() method.

• referrerpolicy: Indicates which referrer to send when fetching the frame's resource:

  • no-referrer: The Referer header will not be sent.
  • no-referrer-when-downgrade: The Referer header will not be sent to origins without TLS (HTTPS).
  • origin: The sent referrer will be limited to the origin of the referring page: its scheme, host, and port.
  • origin-when-cross-origin: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.
  • same-origin: A referrer will be sent for same origin, but cross-origin requests will contain no referrer information.
  • strict-origin: Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP).
  • strict-origin-when-cross-origin (default): Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP).
  • unsafe-url: The referrer will include the origin and the path (but not the fragment, password, or username). This value is unsafe, because it leaks origins and paths from TLS-protected resources to insecure origins.

• sandbox: Controls the restrictions applied to the content embedded in the <iframe>. The value of the attribute can either be empty to apply all restrictions, or space-separated tokens to lift particular restrictions:

  • allow-downloads: Allows downloading files through an <a> or <area> element with the download attribute, as well as through the navigation that leads to a download of a file. This works regardless of whether the user clicked on the link, or JS code initiated it without user interaction.
  • allow-forms: Allows the page to submit forms. If this keyword is not used, a form will be displayed as normal, but submitting it will not trigger input validation, send data to a web server, or close a dialog.
  • allow-modals: Allows the page to open modal windows by Window.alert(), Window.confirm(), Window.print() and Window.prompt(), while opening a <dialog> is allowed regardless of this keyword. It also allows the page to receive BeforeUnloadEvent event.
  • allow-orientation-lock: Lets the resource lock the screen orientation.
  • allow-pointer-lock: Allows the page to use the Pointer Lock API.
  • allow-popups: Allows popups (created, for example, by Window.open() or target="_blank"). If this keyword is not used, such functionality will silently fail.
  • allow-popups-to-escape-sandbox: Allows a sandboxed document to open a new browsing context without forcing the sandboxing flags upon it. This will allow, for example, a third-party advertisement to be safely sandboxed without forcing the same restrictions upon the page the ad links to. If this flag is not included, a redirected page, popup window, or new tab will be subject to the same sandbox restrictions as the originating <iframe>.
  • allow-presentation: Allows embedders to have control over whether an iframe can start a presentation session.
  • allow-same-origin: If this token is not used, the resource is treated as being from a special origin that always fails the same-origin policy (potentially preventing access to data storage/cookies and some JavaScript APIs).
  • allow-scripts: Allows the page to run scripts (but not create pop-up windows). If this keyword is not used, this operation is not allowed.
  • allow-storage-access-by-user-activation Experimental : Allows a document loaded in the <iframe> to use the Storage Access API to request access to unpartitioned cookies.
  • allow-top-navigation: Lets the resource navigate the top-level browsing context (the one named _top).
  • allow-top-navigation-by-user-activation: Lets the resource navigate the top-level browsing context, but only if initiated by a user gesture.
  • allow-top-navigation-to-custom-protocols: Allows navigations to non-http protocols built into browser or registered by a website. This feature is also activated by allow-popups or allow-top-navigation keyword.

  Note:

  • When the embedded document has the same origin as the embedding page, it is strongly discouraged to use both allow-scripts and allow-same-origin, as that lets the embedded document remove the sandbox attribute — making it no more secure than not using the sandbox attribute at all.
  • Sandboxing is useless if the attacker can display content outside a sandboxed iframe — such as if the viewer opens the frame in a new tab. Such content should be also served from a separate origin to limit potential damage.

  Note: When redirecting the user, opening a popup window, or opening a new tab from an embedded page within an <iframe> with the sandbox attribute, the new browsing context is subject to the same sandbox restrictions. This can create issues — for example, if a page embedded within an <iframe> without a sandbox="allow-forms" or sandbox="allow-popups-to-escape-sandbox" attribute set on it opens a new site in a separate tab, form submission in that new browsing context will silently fail.

• src: The URL of the page to embed. Use a value of about:blank to embed an empty page that conforms to the same-origin policy. Also note that programmatically removing an <iframe>'s src attribute (e.g., via Element.removeAttribute()) causes about:blank to be loaded in the frame in Firefox (from version 65), Chromium-based browsers, and Safari/iOS.

  Note: The about:blank page uses the embedding document's URL as its base URL when resolving any relative URLs, such as anchor links.

• srcdoc: Inline HTML to embed, overriding the src attribute. Its content should follow the syntax of a full HTML document, which includes the doctype directive, <html>, <body> tags, etc., although most of them can be omitted, leaving only the body content. This doc will have about:srcdoc as its location. If a browser does not support the srcdoc attribute, it will fall back to the URL in the src attribute.

  Note: The about:srcdoc page uses the embedding document's URL as its base URL when resolving any relative URLs, such as anchor links.

• width: The width of the frame in CSS pixels. Default is 300.